<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情界面</title>
    <!-- 引入顶部导航栏的css文件 -->
    <link rel="stylesheet" href="header.css">
    <style>
        /* 调整用户详情界面的总体布局 */
        #user_info_context_div{
            width: 90%;
            z-index:-1;
            background-color: beige;
            border-radius: 50px;
            padding: 25px;
            position: absolute;
            top: 80px;
            left: 3%;
        }
        /* 用户详情的左侧栏 */
        #user_info_details{
            width: 210px;
            
            min-height: 250px; 
            background-color: aliceblue;
            border-radius: 25px;
            float: left;
            padding: 20px;
        }
        /* 调整用户头像 */
        #user_info_details img{
            width: 200px;
            height: 200px;
        }
        /* 显示单元格最大长度 */
        #user_info_details td{
            max-width: 200px;
            word-wrap: break-word;
            word-break: break-all;
        }
        /* 给可点击项目添加上小手 */
        #user_info_details span, #user_info_details p,button,.user_function{
            cursor: pointer;
        }
        /* 设置弹出的修改密码和修改自述div的样式 */
        #change_pwd,#change_readme{
            border: black 2px solid;
            border-radius: 10px;
            padding:10px;
            background-color: blanchedalmond;
        }
        /* 设置密码修改窗的内容输入框的样式 */
        #change_pwd input{
            width: 100px;
        }
        /* 主要内容所在的中间栏 */
        #user_info_main{
            width: 700px;
            height: 500px;
            background-color: aliceblue;
            /* border-radius: 25px; */
            float: left;
            margin-left: 30px;
        }
        /* 设置交易记录的主表格样式 */
        #deal_table{
            position: relative;
            top:0px;
            left: 30px;
            font-size: 5mm;
            border-collapse: collapse;
            width: 630px;
        }
        /* 设置交易记录的主表格的单元格样式 */
        #deal_table td,#deal_table th{
            border: 1px black solid;
        }
        /* 设置发布新信息的div */
        #add_goods{
            width: 300px;
            font-size: 5mm;
            position: relative;
            left: 150px;
            top:50px;
        }
        /* 设置发布新信息的div的单元格的样式 */
        #add_goods td{
            margin: 15px 5px;
        }
        /* 设置发布信息的div的按钮的样式 */
        #add_goods button{
            position: relative;
            left: 100px;
            margin: 10px auto;
            font-size: 5mm;
        }
        
        /* 设置功能区内容展示div的样式 */
        .user_info_main_context{
            border: solid 2px black;
            position: relative;
            top: 33px;
            background-color: aliceblue;
            height: 500px;
        }
        /* 设置进入按钮的样式 */
        .user_function{
            background-color: darkgray;
            font-weight: bold;
            font-size: 5mm;
            width: 80px;
            height: 30px;
            padding: 3px;
            /* border: 2px black solid; */
            margin-right: 2px;
            text-align: center;
            line-height: 30px;
            float: left;
        }
        /* 设置变色类 */
        .change_color{
            background-color: blanchedalmond;
        }
        /* 改变分页选择器的样式 */
        .paging_input{
            width: 30px;
        }
    </style>
</head>
<body>
    <!-- 引入顶部导航栏的html -->
    <script src="./header_html.js"></script>
    <!-- 下为用户详情界面，包括用户信息，交易记录，发布求购信息，发布出售信息 -->
    <div id="user_info_context_div">
        <!-- 左侧栏，为用户信息界面 -->
        <div id="user_info_details">
            <table>
                <tr>
                    <td>
                        <!-- 头像 -->
                        <img v-bind:src="user.img" alt="" id="user_info_img" >
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 用户名 -->
                        <span>{{user.name}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button @click='isShowChangePwdDIV=true'>更改密码</button>
                        <!-- 弹出的密码输入框 -->
                        <div id="change_pwd" v-show="isShowChangePwdDIV">
                            <table>
                                <tr>
                                    <td><label for="pwd_old">旧密码</label></td>
                                    <td><input type="password" id="pwd_old"></td>
                                </tr>
                                <tr>
                                    <td><label for="pwd_new">新密码</label></td>
                                    <td><input type="password" id="pwd_new"></td>    
                                </tr>
                                <tr>
                                    <td><label for="pwd_new_again">再次输</label></td>
                                    <td><input type="password" id="pwd_new_again"></td>    
                                </tr>
                                <tr>
                                    <td><button @click='isShowChangePwdDIV=false'>取消</button></td>
                                    <td><button>确认</button></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 用户自述 -->
                        <p @click='isShowChangeReadmeDiv=true' >{{user.readme}}asdjkldsajflsadjg[uwaeridsljklfjsdalfjoljgljsdflksjdlfjdsl;j</p>
                        <!-- 修改用户自述div -->
                        <div id="change_readme" v-show="isShowChangeReadmeDiv">
                            <textarea v-model="new_readme"></textarea>
                            <table>
                                <tr>
                                    <td><button @click='isShowChangeReadmeDiv=false'>取消</button></td>
                                    <td><button>确认</button></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 出售商品数量 -->
                        <span>在售商品数量：{{user.sell_number}}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <!-- 求购商品数量 -->
                        <span>求购商品数量：{{user.ask_number}}</span>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 中间栏，主要内容展示 -->
        <div id="user_info_main">
            <!-- 进入交易记录的div -->
            <div class="user_function" @click="isShowList=true" :class="{change_color:isShowList}"><span>交易记录</span></div>
            <!-- 进入发布信息的div -->
            <div class="user_function" @click="isShowList=false" :class="{change_color:!isShowList}"><span>发布信息</span></div>

            <!-- 功能具体内容 -->
            <div class="user_info_main_context">
                <!-- 交易记录 -->
                <div id="deal_function" v-show="isShowList" :class="{change_color:isShowList}">
                    <table id="deal_table">
                        <tr>
                            <th>名称</th>
                            <th>价格</th>
                            <!-- <th>数量</th> -->
                            <!-- <th>描述</th> -->
                            <th>类型</th>
                            <th>发布</th>
                            <th>乙方</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="(item, index) in deals" :key="index">
                            <td>{{item.name}}</td>
                            <td>{{item.prices}}</td>
                            <!-- <td>{{item.number}}</td> -->
                            <!-- <td>{{item.readme}}</td> -->
                            <td>{{item.kind}}</td>
                            <td>{{item.type}}</td>
                            <td>{{item.other}}</td>
                            <td>{{item.status}}</td>
                            <td><button>确认</button></td>
                        </tr>
                    </table>
                    <!-- 分页选择器 -->
                    <button style="margin: 15px 0px 0px 500px;" @click="change_number(current_pag-1)">&lt;</button>
                    <input type="number" :max="deals_total" v-model="current_pag" class="paging_input">
                    <button @click="change_number(current_pag+1)">&gt;</button>
                </div>
                <!-- 发布求购 -->
                <div id="add_goods" v-show="!isShowList" :class="{change_color:!isShowList}">
                    <table>
                        <tr>
                            <td>
                                <label >照片地址:
                                    <input type="url" v-model="add_goods.img">
                                </label>
                            </td>
                        </tr>
                        <tr>
                   
                            <td>
                                <label >商品名称:
                                    <input type="text" v-model="add_goods.name">
                                </label>
                            </td>
                        </tr>
                        <tr>
                
                            <td>
                                <label >商品价格:
                                    <input type="number" v-model="add_goods.prices">
                                </label>
                            </td>
                        </tr>
                        <tr>
                      
                            <td>
                                <label>
                                    商品描述:
                                    <textarea v-model="add_goods.readme"></textarea>
                                </label>
                            </td>
                        </tr>
                        <tr>
                 
                            <td>
                                <label >发布类型:</label>
                                <label>求购
                                    <input type="radio" v-model="add_goods.type" value="1">
                                </label>
                                <label>出售
                                    <input type="radio" v-model="add_goods.type" value="2">
                                </label>    
                            </td>
                        </tr>
                        <tr>
        
                            <td>
                                <button>确认</button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入vue文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入顶部导航栏的js文件 -->
    <script src="./header_js.js"></script>
    <!-- 引入cookie方法的js文件 -->
    <script src="./cookie_function.js"></script>
    <!-- 本页面的js内容 -->
    <script>
        let user_info = new Vue({
            el:"#user_info_context_div",
            data:{
                  // 买家或卖家用户信息
                user:{
                    // 用户头像
                    img:"https://img13.360buyimg.com/seckillcms/s144x144_jfs/t1/122971/5/18428/70297/5face493Ead605f90/b5d61b6a6d862dda.jpg!q70.jpg.webp",
                    // 买家或卖家用户名
                    name:"用户名",
                    // 用户自述
                    readme:"用户自述",
                    // 用户出售商品数
                    sell_number:5,
                    // 用户求购商品数
                    ask_number:0,
                },
                deals:[
                    {
                        id:001,
                        name:'商品一号',
                        prices:1500,
                        number:15,
                        readme:'这是商品一号的描述，为了演示单元格长度太长，导致内容被省略，所以把内容设置得这么长。',
                        kind:"电子产品",
                        type:"求购",
                        other:'无',
                        status:"待交易"
                    }
                ],
                // 当前页数
                current_pag:0,
                // 总页数
                deals_total:1,
                // 是否显示密码修改div
                isShowChangePwdDIV:false,
                // 显示是否修改自述div
                isShowChangeReadmeDiv:false,
                // 是否显示记录列表界面
                isShowList:true,
                // 新的自述内容
                new_readme:"",
                // 新增商品对象
                add_goods:{
                    name:"新商品",
                    prices:100,
                    img:"",
                    readme:"商品自述",
                    kind:7,
                    type:"1"
                }

            },
            methods: {
                // 更改密码或自述
                change_info(val){
                    if(val=='password'){
                        let oldpwd = prompt('请输入旧密码：')
                        if(oldpwd==null){
                            alert("密码错误！")
                        }else{
                            let newpwd = prompt('请输入新密码：')
                        }
                    }
                },
                change_number(val){
                    if(val<0){
                        this.current_pag=0;
                    }else if(val<=this.deals_total){
                        this.current_pag=val;
                    }
                },
                choose_function(val){
                    if(val){

                    }
                }
            },
            mounted() {
                
            }
        })
    </script>
</body>
</html>